<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <style type="text/css">
		 	#screen{width: 500px;height:300px;background:#999;color: #fff;overflow:auto;}
		 	#content{width: 400px;height: 50px;color: #666;font-size: 18px;float: left;}
		 	#submit{color: #fff;background:#0086B3;width:100px;line-height:50px;outline: none;}
		 	.text-left{text-align:left;}
		 	.text-right{text-align:right;}
		 </style>
	</head>
	<body>
		<div id="screen"></div>
		<input type="text" id="content" placeholder='请输入聊天内容'/>
		<button id="submit">发送信息</button>
		
		<script type="text/javascript">
			var screen = document.getElementById('screen');
			var content  = document.getElementById('content');
			var submit = document.getElementById('submit');
			var userid = new Date().getTime();
			
			if(!sessionStorage[userid]){
				sessionStorage[userid] =  userid;
			}
			
			submit.onclick = function(){
				var date = new Date();
		        var time = date.getTime();
				var rowMsg = "<div>" +content.value+ "</div>"
				screen.innerHTML += rowMsg;
				localStorage[time] = JSON.stringify({userid:sessionStorage[userid],msg:rowMsg}) ;
				content.value = '';
				
			}
			setInterval(function(){
				var str = '';
				for(var i in localStorage){
					if(localStorage.hasOwnProperty(i)){
						var res = JSON.parse(localStorage[i]);
						if(res['userid'] == sessionStorage[userid]){
							str += '<div class="text-left"><span>'+res['msg']+'</span></div>'+'<br/>';
						}else{
							str += '<div class="text-right"><span>'+res['msg']+'</span></div>'+'<br/>';
						}
				    }
					screen.innerHTML = str;
					screen.scrollTop = screen.scrollHeight;
			    }
				
			},1000);
			
			
			
		</script>
	</body>
</html>
